<script setup>
    import { ElMessage } from "element-plus";
    import { ref, computed } from "vue";
    import {loginApi} from '@/api/user';
    let name = ref("");
    let password = ref("");
    let disabled = computed(() => {
        // 通过ref()方法处理过的变量，获取值要通过.value来获取
        return name.value.length == 0 || password.value.length == 0;
    });

    //登陆方法
    // 登录的方法
    let login = () => {
        loginApi({ username: name.value, password: password.value })
            .then((res) => {
                // console.log(res);
                if (res.code == 0 && res.data==true) {
                    ElMessage({
                        message: "登陆成功",
                        type: "success",
                        duration: 1500,
                    });
                    return;
                }

                // 保存 token
                //localStorage.setItem("token", res.data.token);

                ElMessage({
                    message: "登陆失败",
                    type: "error",
                    duration: 1500,
                });
                setTimeout(() => {
                    router.push({ name: "home" });
                }, 1500);
            })
            .catch((err) => {
                console.log(err);
            })
            .finally(() => {
                console.log("总会调用");
            });
    };
</script>

<template>
    <div>
        <div class="login">
            <div id="title">
                <h1>云课程管理系统</h1>
            </div>
            <div class="input">
                <el-input
                        v-model="name"
                        :prefix-icon="User"
                        placeholder="请输入用户名"
                ></el-input>
            </div>
            <div class="input">
                <el-input
                        v-model="password"
                        :prefix-icon="Lock"
                        placeholder="请输入密码"
                        auto-complete="new-password"
                        show-password
                ></el-input>
            </div>
            <div class="input">
                <el-button style="width: 500px" type="primary" :disabled="disabled" @click="login">
                    登录
                </el-button>
            </div>
        </div>
    </div>

</template>



<style>
    .login {
        width: 100%;
        height: 100%;
        background: #595959;
/*
        background-image: url("../assets/login_bg.jpg");
*/
        position: absolute;
    }

    .login #title {
        text-align: center;
        color: azure;
        margin-top: 200px;
    }

    .login .input {
        margin: 20px auto;
        width: 500px;
    }
</style>
